import React from 'react';
import { Icon, NavBar } from "antd-mobile";
import DishDesc from "./component/dish-desc";
import "./css/style.less";
import history from "../../util/router/history";
import { DishDetailStore } from "./store";
import { inject, observer } from "mobx-react";
import {RouteComponentProps} from "react-router";

interface IDishDetailProps extends RouteComponentProps<{id: string}>{
    dishDetailStore?: DishDetailStore | any;
}

@inject('dishDetailStore')
@observer
export default class DishDetail extends React.Component<IDishDetailProps, any> {

  componentDidMount(): void {
    const { match:{params:{ id }}, dishDetailStore: {initDishInfo}} = this.props;
    initDishInfo(id);
  }

  render() {
    return (
      <>
        {/* 导航栏 */}
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={history.goBack}
        >
          菜品详情
        </NavBar>

        {/* 菜品信息 */}
        <DishDesc />
      </>
    );
  }

}
